<template>
  <div class="employees-container">
    <mytools @openDialog="showDialog = true"></mytools>
    <!-- 表格部分 -->
    <el-card>
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column width="180" prop="username" label="姓名">
        </el-table-column>
        <el-table-column width="180" label="头像">
          <template slot-scope="{ row }">
            <img
              class="staffPhoto"
              :src="row.staffPhoto"
              alt=""
              v-imgerror="defaultImg"
            />
          </template>
        </el-table-column>
        <el-table-column width="180" prop="mobile" label="手机号">
        </el-table-column>
        <el-table-column width="180" prop="workNumber" label="工号">
        </el-table-column>
        <el-table-column width="180" label="聘用形式">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | myEmployees }}
          </template>
        </el-table-column>
        <el-table-column width="180" prop="departmentName" label="部门">
        </el-table-column>
        <el-table-column width="180" prop="timeOfEntry" label="入职时间">
        </el-table-column>
        <el-table-column width="180" prop="name" label="是否在职">
          在职
        </el-table-column>
        <el-table-column width="180" prop="name" label="状态">
          可用
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="300">
          <template slot-scope="{ row }">
            <el-button type="text" @click="toDetail(row)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text" :disabled="'employees-departure' | checkBtn">
              离职
            </el-button>
            <el-button type="text" @click="openRole(row)">角色</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 新增面板 -->
    <proccesspanel
      :showDialog.sync="showDialog"
      @updateDate="updateDate"
    ></proccesspanel>

    <!-- 角色权限面板 -->
    <el-dialog title="分配角色" :visible.sync="showRole">
      <el-form>
        <el-form-item>
          <!-- 多选框 -->
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="item in roleList"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="dialogBtn">
          <el-button @click="showRole = false">取 消</el-button>
          <el-button type="primary" @click="submitRole">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllEmployeesList,
  getBaseInfo,
  setEmployeesRole
} from '@/api/employees.js'
import { getRoleList } from '@/api/setting.js'
export default {
  name: 'employees',
  data () {
    return {
      // 保存员工列表数据
      list: [{ name: '1111' }],
      currentPage: 1, // 当前页
      pageSizes: [5, 10, 15, 20], // 可选每页显示数据条数
      pageSize: 5, // 当前每页显示数据的条数
      total: 0, // 数据总条数
      showDialog: false, // 控制面板显示与隐藏
      defaultImg: require('@/assets/common/img.jpeg'), // 图片加载失败则加载默认图片
      showRole: false, // 控制角色面板的显示与隐藏
      checkList: [], // 多选框选中的选项
      roleList: [], // 角色列表
      currentEmployees: [] // 员工个人信息
    }
  },
  methods: {
    // 每页显示条数改变时触发
    handleSizeChange (size) {
      this.pageSize = size
      this.currentPage = 1
      this.getAllInfo()
    },
    // 当前页码改变时触发
    handleCurrentChange (page) {
      this.currentPage = page
      this.getAllInfo()
    },
    // 获取员工信息方法
    async getAllInfo () {
      let res = await getAllEmployeesList({
        page: this.currentPage,
        size: this.pageSize
      })
      // console.log(res);
      // 保存数据
      this.list = res.data.data.rows
      // 保存所有条数
      this.total = res.data.data.total
    },
    // 子组件通知更新数据
    updateDate () {
      this.getAllInfo()
    },
    // 跳转详情页
    toDetail (row) {
      this.$router.push(`/employees/detail/${row.id}`)
    },
    // 打开角色列表面板
    async openRole (row) {
      // 保存员工信息
      this.currentEmployees = row
      // 根据id获取员工角色信息
      let res = await getBaseInfo(row.id)
      // console.log(res);
      this.checkList = res.data.data.roleIds
      this.showRole = true
    },
    // 获取角色列表方法
    async getRoleList () {
      let res = await getRoleList()
      // console.log(res);
      // 保存数据
      this.roleList = res.data.data.rows
    },
    // 设置员工角色
    async submitRole () {
      await setEmployeesRole({
        id: this.currentEmployees.id,
        roleIds: this.checkList
      })
      // 提示更新成功
      this.$message.success('员工角色分配成功')
      this.showRole = false
      this.getAllInfo()
    }
  },
  created () {
    // 调用获取员工信息方法
    this.getAllInfo()
    // 调用获取角色列表方法
    this.getRoleList()
  },
  components: {
    proccesspanel: () => import('./components/proccesspanel.vue')
  }
}
</script>

<style lang="scss">
.employees-container {
  .el-card {
    margin: 20px;

    .staffPhoto {
      width: 50px;
      height: 50px;
      cursor: pointer;
    }
  }

  .dialogBtn {
    text-align: center;
  }
}
</style>
